<template>
	<view class="boxbg">
		<view class="btnbox">
			<navigator class="btn top" url="">
				<view class="title">{{roomDetail.name}}</view>
				<view class="values">
					<view class="right-value">共{{memberlist.length}}人</view>
					<!-- <image class="right-image" src="../../static/groupchat/to_right.png" mode=""></image> -->
				</view>
			</navigator>
			<view class="groupsuserbox">
				<view class="itembox" v-for="(val,index) in memberlist" :key='val.userId' @tap="settingPeop(val.userId)">
					<dimg class="avatar" :src="val.userId | avatar" mode=""></dimg>
					<view class="nickname">{{val.remarkName || val.nickname}}</view>
				</view>
				<view class="itembox" @tap="$open('./addGroupPeop?roomid='+roomid)"><image class="avatar" src="../../static/chatFriend/yuanjia.png" mode=""></image></view>
			</view>
		</view>
		<view class="btnbox">
			<view class="btn" @tap="changeAlert('修改群名')">
				<view class="title">群组名称</view>
				<view class="values">
					<view class="right-value">{{roomDetail.name}}</view>
					<image class="right-image" src="../../static/groupchat/to_right.png" mode=""></image>
				</view>
			</view>
			<view class="btn"  @tap="changeAlert('修改群组描述')">
				<view class="title">群组描述</view>
				<view class="values">
					<view class="right-value">{{roomDetail.desc}}</view>
					<image class="right-image" src="../../static/groupchat/to_right.png" mode=""></image>
				</view>
			</view>
			<!-- <navigator class="btn" url="">
				<view class="title">群二维码</view>
				<view class="values">
					<image class="right-qrcode" src="../../static/groupchat/qrcode.png" mode=""></image>
					<image class="right-image" src="../../static/groupchat/to_right.png" mode=""></image>
				</view>
			</navigator> -->
			<navigator class="btn" :url="'./have_group_notice?id='+roomid+'&userId='+roomDetail.userId">
				<view class="title">群内公告</view>
				<view class="values">
					<view class="right-value">{{roomDetail.notice.text || '暂无公告	'}}</view>
					<image class="right-image" src="../../static/groupchat/to_right.png" mode=""></image>
				</view>
			</navigator>
			<view class="btn" @tap="alertTitle='群内昵称'">
				<view class="title">群组昵称</view>
				<view class="values">
					<view class="right-value">{{roomDetail.member.remarkName || roomDetail.member.nickname}}</view>
					<image class="right-image" src="../../static/groupchat/to_right.png" mode=""></image>
				</view>
			</view>
		</view>
<!-- 		<view class="btnbox">
			<navigator class="btn" url="">
				<view class="title">设置群头像</view>
				<view class="values">
					<view class="right-value"></view>
					<image class="right-image" src="../../static/groupchat/to_right.png" mode=""></image>
				</view>
			</navigator>
			<navigator class="btn" url="">
				<view class="title">群共享文件</view>
				<view class="values">
					<view class="right-value"></view>
					<image class="right-image" src="../../static/groupchat/to_right.png" mode=""></image>
				</view>
			</navigator>
		</view> -->
		<!-- <view class="btnbox">
			<view class="btn">
				<view class="title">置顶聊天</view>
				<switch />
			</view>
			<view class="btn">
				<view class="title">消息免打扰</view>
				<switch />
			</view>
			<view class="btn">
				<view class="title">屏蔽群消息</view>
				<switch />
			</view>
		</view> -->
<!-- 		<view class="btnbox">
			<navigator class="btn">
				<view class="title">查找聊天记录</view>
				<view class="values">
					<view class="right-value"></view>
					<image class="right-image" src="../../static/groupchat/to_right.png" mode=""></image>
				</view>
			</navigator>
			<navigator class="btn">
				<view class="title">消息过期自动销毁</view>
				<view class="values">
					<view class="right-value">永久</view>
					<image class="right-image" src="../../static/groupchat/to_right.png" mode=""></image>
				</view>
			</navigator>
			<navigator class="btn">
				<view class="title">清空聊天记录</view>
				<view class="values">
					<view class="right-value"></view>
					<image class="right-image" src="../../static/groupchat/to_right.png" mode=""></image>
				</view>
			</navigator>
		</view> -->
		<view class="btnbox">
<!-- 			<navigator class="btn">
				<view class="title">禁言</view>
				<view class="values">
					<view class="right-value"></view>
					<image class="right-image" src="../../static/groupchat/to_right.png" mode=""></image>
				</view>
			</navigator> -->
			<navigator class="btn">
				<view class="title">全体禁言</view>
				<switch :checked="roomDetail.talkTime!=0" @change="talkChange"/>
			</navigator>
		</view>
<!-- 		<view class="btnbox">
			<navigator class="btn" url="../user/group_manage">
				<view class="title">群管理</view>
				<view class="values">
					<view class="right-value"></view>
					<image class="right-image" src="../../static/groupchat/to_right.png" mode=""></image>
				</view>
			</navigator>
		</view> -->
<!-- 		<view class="btnbox">
			<navigator class="btn">
				<view class="title">举报</view>
				<view class="values">
					<view class="right-value"></view>
					<image class="right-image" src="../../static/groupchat/to_right.png" mode=""></image>
				</view>
			</navigator>
		</view> -->
		<alert :showImg="false" :showInput="true" :alertTitle="alertTitle" :showCancel="false" v-if="alertTitle!=''" @alertConfirm='alertConfirm'></alert>
		<view class="outofgroup" v-if="userId!=roomDetail.userId" @tap="roomDelete(0)">退出群组</view>
		<view class="outofgroup" v-if="userId==roomDetail.userId" @tap="roomDelete(1)">解散群组</view>
	</view>
</template>

<script>
import alert from '@/components/alert/alert.vue'
export default {
	data() {
		return {
			roomid: '',
			roomDetail:'',
			alertTitle:'',
			memberlist:[],
			userId:uni.getStorageSync('userinfo').userId,
			touserId:''
		};
	},
	onLoad(e) {
		this.roomid = e.id;
	},
	onShow() {
		this.getRoom()
		this.memberList()
	},
	methods: {
		settingPeop(userId){
			let that=this
			uni.showActionSheet({
				itemList:['踢出','备注'],
				success(e) {
					if(e.tapIndex==0){
						// 踢出
						let parems={
							roomId: that.roomid,
							userId:userId
						}
						that.$ajax(that.apiList.memberDelete,parems ,'POST').then(res => {
							that.$sToast('踢出成功')
							that.memberList()
						});
					}else if(e.tapIndex==1){
						that.alertTitle='备注'
						that.touserId=userId
					}
				}
			})
		},
		// 全员禁言
		talkChange(e){
			let talkTime=parseInt(new Date().getTime()/1000)
			if(!e.detail.value){
				// 禁言
				talkTime=0
			}
			this.$ajax(this.apiList.update,{
				roomId: this.roomid,
				talkTime:talkTime
			} ,'POST').then(res => {
				if(!e.detail.value){
					this.$sToast('取消禁言')
				}else{
					this.$sToast('全员禁言')
				}
			});
		},
		// 退出或解散群聊
		roomDelete(type){
			let that=this
			uni.showModal({
				title:'警告',
				content:'确定'+(type==1?'解散':'退出')+'群组吗？',
				success(e) {
					if(e.confirm){
						let parems={
							roomId: that.roomid,
							userId:that.userId
						}
						// type为1是解散群组,不需要传userid
						if(type==1){
							delete parems.userId
						}
						that.$ajax(type==1?that.apiList.roomDelete:that.apiList.memberDelete,parems ,'POST').then(res => {
							that.$sToast(type==1?'解散成功':'退出成功')
							that.$back(2,2000)
						});
					}
				}
			})
		},
		// 修改群名称和描述
		alertConfirm(type,text){
			if(this.alertTitle=='修改群名'){
				this.$ajax(this.apiList.update, {
					roomId: this.roomid,
					roomName:text
				},'POST').then(res => {
					this.getRoom()
				});
			}else if(this.alertTitle=='修改群组描述'){
				this.$ajax(this.apiList.update, {
					roomId: this.roomid,
					desc:text
				},'POST').then(res => {
					this.getRoom()
				});
			}else if(this.alertTitle=='备注'){
				// 备注
				this.$ajax(this.apiList.memberUpdate,{
					roomId: this.roomid,
					userId:this.touserId,
					remarkName:text
				} ,'POST').then(res => {
					this.$sToast('备注成功')
					this.getRoom()
					this.memberList()
				});
			}else if(this.alertTitle=='群内昵称'){
				// 群内昵称
				this.$ajax(this.apiList.memberUpdate,{
					roomId: this.roomid,
					userId:this.userId,
					remarkName:text
				} ,'POST').then(res => {
					this.getRoom()
					this.memberList()
				});
			}
		},
		// 判断有无修改群组权限
		changeAlert(title){
			if(uni.getStorageSync('userinfo').userId!=this.roomDetail.userId){
				this.$sToast('暂无权限')
				return
			}
			this.alertTitle=title
		},
		// 查询群组详情
		getRoom() {
			this.$ajax(this.apiList.getRoom, {
				roomId: this.roomid
			},'POST').then(res => {
				this.alertTitle=''
				this.roomDetail=res.data
			});
		},
		// 查询群组成员
		memberList(){
			this.$ajax(this.apiList.memberList, {
				roomId: this.roomid
			},'POST').then(res => {
				this.memberlist=res.data
			});
		}
	},
	components:{alert}
};
</script>

<style lang="scss">
	page{
		background: $bagcolor;
	}
.boxbg {
	background-color: $bagcolor;
	// padding-bottom:20upx;
	.btnbox {
		background-color: #ffffff;
		padding-left: 30upx;
		border-top: 1upx solid #e0e0e0;
		border-bottom: 1upx solid #e0e0e0;
		margin-bottom: 20upx;
		.btn {
			width: 100%;
			height: 104upx;
			display: flex;
			justify-content: space-between;
			font-size: 30upx;
			line-height: 104upx;
			border-bottom: 1upx solid #e0e0e0;
			.title {
				font-weight: 600;
				color: #333333;
			}
			.values {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.right-value {
					color: #666666;
					margin-right: 20upx;
					font-size: 30upx;
				}
				.right-qrcode {
					width: 30upx;
					height: 30upx;
					margin-right: 30upx;
				}
				.right-image {
					width: 12upx;
					height: 24upx;
					margin-right: 30upx;
				}
			}
			switch {
				margin-right: 20upx;
				transform: scale(0.9);
			}
			&.top {
				height: 80upx;
				line-height: 104upx;
				border-bottom: none;
			}
			&:last-child {
				border-bottom: none;
			}
		}
		.groupsuserbox {
			width: 100%;
			min-height: 140upx;
			padding: 0 38upx 28upx 0;
			display: flex;
			flex-wrap: wrap;
			.itembox {
				width: 100upx;
				height: 120upx;
				overflow: hidden;
				margin: 20upx 20upx 0 0;
				.avatar {
					width: 78upx;
					height: 78upx;
					margin-left: 11upx;
					border-radius: 50%;
					border: 1upx solid #ffffff;
					overflow: hidden;
				}
				.nickname {
					width: 100%;
					height: 24upx;
					line-height: 24upx;
					color: #333333;
					margin-top: 6upx;
					font-size: 24upx;
					text-align: center;
					overflow: hidden;
				}
			}
		}
	}
	.outofgroup {
		width: 100%;
		height: 104upx;
		background-color: #ffffff;
		border-top: 1upx solid #e0e0e0;
		border-bottom: 1upx solid #e0e0e0;
		line-height: 104upx;
		text-align: center;
		color: #0297fe;
		font-weight: 600;
	}
}
</style>
